<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>多种样式列表展示</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --secondary: #f97316;
            --success: #10b981;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 8px;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
        }
        
        /* 通用样式 */
        .section-title {
            padding: 16px 16px 8px;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .list-section {
            margin-bottom: 24px;
        }
        
        .divider {
            height: 10px;
            background-color: var(--bg-light);
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border-light);
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        
        .nav-title {
            font-size: 1.1rem;
            font-weight: 600;
        }
        
        /* 1. 卡片式列表 */
        .card-list {
            background-color: var(--bg-white);
            padding: 8px 16px;
        }
        
        .card-item {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            padding: 12px;
            margin-bottom: 10px;
            border: 1px solid var(--border-light);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        
        .card-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        }
        
        .card-header {
            display: flex;
            gap: 10px;
            margin-bottom: 8px;
        }
        
        .card-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .card-user {
            flex: 1;
        }
        
        .card-name {
            font-weight: 600;
            font-size: 0.95rem;
            margin-bottom: 2px;
        }
        
        .card-meta {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .card-content {
            font-size: 0.9rem;
            margin-bottom: 10px;
            line-height: 1.4;
        }
        
        .card-actions {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .card-action {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        /* 2. 简约式列表 */
        .simple-list {
            background-color: var(--bg-white);
        }
        
        .simple-item {
            display: flex;
            align-items: center;
            padding: 12px 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .simple-item:last-child {
            border-bottom: none;
        }
        
        .simple-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }
        
        .simple-info {
            flex: 1;
        }
        
        .simple-title {
            font-weight: 500;
            font-size: 0.95rem;
            margin-bottom: 2px;
        }
        
        .simple-desc {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .simple-arrow {
            color: var(--text-secondary);
            font-size: 1rem;
        }
        
        /* 3. 图文混排列表 */
        .media-list {
            background-color: var(--bg-white);
            padding: 8px 16px;
        }
        
        .media-item {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid var(--border-light);
        }
        
        .media-item:last-child {
            border-bottom: none;
        }
        
        .media-content {
            flex: 1;
            margin-right: 10px;
        }
        
        .media-title {
            font-weight: 500;
            font-size: 0.95rem;
            margin-bottom: 6px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .media-meta {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }
        
        .media-images {
            display: flex;
            gap: 5px;
            width: 100px;
        }
        
        .media-img {
            width: 100%;
            height: 80px;
            border-radius: 6px;
            object-fit: cover;
        }
        
        .media-img.single {
            width: 100px;
        }
        
        /* 4. 时间线列表 */
        .timeline-list {
            background-color: var(--bg-white);
            padding: 16px;
            position: relative;
        }
        
        .timeline-list::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 24px;
            width: 2px;
            background-color: var(--border-light);
        }
        
        .timeline-item {
            position: relative;
            padding-left: 56px;
            padding-bottom: 20px;
        }
        
        .timeline-item:last-child {
            padding-bottom: 0;
        }
        
        .timeline-dot {
            position: absolute;
            left: 18px;
            top: 0;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: var(--primary);
            border: 3px solid var(--bg-white);
        }
        
        .timeline-dot.success {
            background-color: var(--success);
        }
        
        .timeline-dot.warning {
            background-color: var(--secondary);
        }
        
        .timeline-time {
            font-size: 0.8rem;
            color: var(--text-secondary);
            margin-bottom: 6px;
        }
        
        .timeline-content {
            background-color: var(--bg-light);
            padding: 10px 12px;
            border-radius: var(--radius);
            font-size: 0.9rem;
        }
        
        /* 5. 标签式列表 */
        .tag-list {
            background-color: var(--bg-white);
            padding: 16px;
        }
        
        .tag-group {
            margin-bottom: 16px;
        }
        
        .tag-group:last-child {
            margin-bottom: 0;
        }
        
        .tag-group-title {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .tag {
            padding: 6px 12px;
            background-color: var(--bg-light);
            border-radius: 20px;
            font-size: 0.85rem;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .tag.active {
            background-color: var(--primary);
            color: white;
        }
        
        .tag-icon {
            font-size: 0.8rem;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-action">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">多种样式列表</div>
        <button class="nav-action">
            <i class="fas fa-ellipsis-v"></i>
        </button>
    </div>
    
    <!-- 1. 卡片式列表 -->
    <div class="list-section">
        <div class="section-title">卡片式列表</div>
        <div class="card-list">
            <div class="card-item">
                <div class="card-header">
                    <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="card-avatar">
                    <div class="card-user">
                        <div class="card-name">林小雨</div>
                        <div class="card-meta">今天 14:30 · 北京</div>
                    </div>
                </div>
                <div class="card-content">
                    周末去了新开的艺术展，展品真的很有创意，推荐给喜欢艺术的朋友们！
                </div>
                <div class="card-actions">
                    <div class="card-action"><i class="far fa-heart"></i> 24</div>
                    <div class="card-action"><i class="far fa-comment"></i> 8</div>
                    <div class="card-action"><i class="far fa-share-square"></i> 分享</div>
                </div>
            </div>
            
            <div class="card-item">
                <div class="card-header">
                    <img src="https://picsum.photos/id/91/100/100" alt="用户头像" class="card-avatar">
                    <div class="card-user">
                        <div class="card-name">张明</div>
                        <div class="card-meta">昨天 19:45 · 上海</div>
                    </div>
                </div>
                <div class="card-content">
                    新买的相机终于到了，迫不及待想出去拍点东西，有没有推荐的摄影地点？
                </div>
                <div class="card-actions">
                    <div class="card-action"><i class="far fa-heart"></i> 36</div>
                    <div class="card-action"><i class="far fa-comment"></i> 12</div>
                    <div class="card-action"><i class="far fa-share-square"></i> 分享</div>
                </div>
            </div>
            
            <div class="card-item">
                <div class="card-header">
                    <img src="https://picsum.photos/id/65/100/100" alt="用户头像" class="card-avatar">
                    <div class="card-user">
                        <div class="card-name">王小红</div>
                        <div class="card-meta">3天前 · 广州</div>
                    </div>
                </div>
                <div class="card-content">
                    自己做的提拉米苏，第一次尝试，味道还不错～ 有喜欢甜点的朋友可以一起交流配方呀！
                </div>
                <div class="card-actions">
                    <div class="card-action"><i class="far fa-heart"></i> 52</div>
                    <div class="card-action"><i class="far fa-comment"></i> 18</div>
                    <div class="card-action"><i class="far fa-share-square"></i> 分享</div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="divider"></div>
    
    <!-- 2. 简约式列表 -->
    <div class="list-section">
        <div class="section-title">简约式列表</div>
        <div class="simple-list">
            <div class="simple-item">
                <div class="simple-icon">
                    <i class="fas fa-user"></i>
                </div>
                <div class="simple-info">
                    <div class="simple-title">个人资料</div>
                    <div class="simple-desc">编辑你的基本信息和偏好设置</div>
                </div>
                <div class="simple-arrow">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
            
            <div class="simple-item">
                <div class="simple-icon" style="background-color: rgba(249, 115, 22, 0.1); color: var(--secondary);">
                    <i class="fas fa-bell"></i>
                </div>
                <div class="simple-info">
                    <div class="simple-title">通知中心</div>
                    <div class="simple-desc">3条未读消息</div>
                </div>
                <div class="simple-arrow">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
            
            <div class="simple-item">
                <div class="simple-icon" style="background-color: rgba(16, 185, 129, 0.1); color: var(--success);">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <div class="simple-info">
                    <div class="simple-title">安全设置</div>
                    <div class="simple-desc">账号安全、隐私保护</div>
                </div>
                <div class="simple-arrow">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
            
            <div class="simple-item">
                <div class="simple-icon" style="background-color: rgba(239, 68, 68, 0.1); color: var(--danger);">
                    <i class="fas fa-question-circle"></i>
                </div>
                <div class="simple-info">
                    <div class="simple-title">帮助中心</div>
                    <div class="simple-desc">常见问题和反馈</div>
                </div>
                <div class="simple-arrow">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
        </div>
    </div>
    
    <div class="divider"></div>
    
    <!-- 3. 图文混排列表 -->
    <div class="list-section">
        <div class="section-title">图文混排列表</div>
        <div class="media-list">
            <div class="media-item">
                <div class="media-content">
                    <div class="media-title">城市夜景摄影大赛获奖作品公示，快来看看有没有你喜欢的作品</div>
                    <div class="media-meta">摄影社区 · 2小时前</div>
                </div>
                <div class="media-images">
                    <img src="https://picsum.photos/id/29/300/300" alt="图片" class="media-img single">
                </div>
            </div>
            
            <div class="media-item">
                <div class="media-content">
                    <div class="media-title">周末徒步路线推荐，适合新手的5条入门级路线，风景优美难度适中</div>
                    <div class="media-meta">户外俱乐部 · 昨天</div>
                </div>
                <div class="media-images">
                    <img src="https://picsum.photos/id/28/300/300" alt="图片1" class="media-img">
                    <img src="https://picsum.photos/id/27/300/300" alt="图片2" class="media-img">
                </div>
            </div>
            
            <div class="media-item">
                <div class="media-content">
                    <div class="media-title">春季美食节将于下周六开幕，汇集各地特色小吃，还有烹饪大师现场教学</div>
                    <div class="media-meta">美食协会 · 3天前</div>
                </div>
                <div class="media-images">
                    <img src="https://picsum.photos/id/431/300/300" alt="图片1" class="media-img">
                    <img src="https://picsum.photos/id/488/300/300" alt="图片2" class="media-img">
                    <img src="https://picsum.photos/id/292/300/300" alt="图片3" class="media-img">
                </div>
            </div>
        </div>
    </div>
    
    <div class="divider"></div>
    
    <!-- 4. 时间线列表 -->
    <div class="list-section">
        <div class="section-title">时间线列表</div>
        <div class="timeline-list">
            <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-time">今天 09:30</div>
                <div class="timeline-content">
                    你的交友申请已发送给 <strong>林小雨</strong>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot success"></div>
                <div class="timeline-time">昨天 16:45</div>
                <div class="timeline-content">
                    <strong>张明</strong> 已接受你的担保交友请求，现在可以开始聊天了
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-time">昨天 10:20</div>
                <div class="timeline-content">
                    你完成了实名认证，获得 <strong>信誉值+50</strong>
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot warning"></div>
                <div class="timeline-time">3天前 21:15</div>
                <div class="timeline-content">
                    你的担保交友申请被 <strong>王小红</strong> 拒绝，原因：兴趣不符
                </div>
            </div>
            
            <div class="timeline-item">
                <div class="timeline-dot"></div>
                <div class="timeline-time">5天前 14:00</div>
                <div class="timeline-content">
                    你成功发布了一个新的交友活动：<strong>周末摄影采风</strong>
                </div>
            </div>
        </div>
    </div>
    
    <div class="divider"></div>
    
    <!-- 5. 标签式列表 -->
    <div class="list-section">
        <div class="section-title">标签式列表</div>
        <div class="tag-list">
            <div class="tag-group">
                <div class="tag-group-title">兴趣爱好</div>
                <div class="tags">
                    <div class="tag active">
                        <i class="fas fa-camera tag-icon"></i> 摄影
                    </div>
                    <div class="tag">
                        <i class="fas fa-hiking tag-icon"></i> 徒步
                    </div>
                    <div class="tag">
                        <i class="fas fa-music tag-icon"></i> 音乐
                    </div>
                    <div class="tag">
                        <i class="fas fa-utensils tag-icon"></i> 美食
                    </div>
                    <div class="tag">
                        <i class="fas fa-book tag-icon"></i> 阅读
                    </div>
                    <div class="tag">
                        <i class="fas fa-film tag-icon"></i> 电影
                    </div>
                </div>
            </div>
            
            <div class="tag-group">
                <div class="tag-group-title">交友类型</div>
                <div class="tags">
                    <div class="tag active">
                        <i class="fas fa-user-friends tag-icon"></i> 普通朋友
                    </div>
                    <div class="tag">
                        <i class="fas fa-hands-helping tag-icon"></i> 学习伙伴
                    </div>
                    <div class="tag">
                        <i class="fas fa-utensils tag-icon"></i> 饭搭子
                    </div>
                    <div class="tag">
                        <i class="fas fa-running tag-icon"></i> 运动搭档
                    </div>
                </div>
            </div>
            
            <div class="tag-group">
                <div class="tag-group-title">活动范围</div>
                <div class="tags">
                    <div class="tag">
                        <i class="fas fa-map-marker-alt tag-icon"></i> 同城
                    </div>
                    <div class="tag active">
                        <i class="fas fa-globe-asia tag-icon"></i> 全国
                    </div>
                    <div class="tag">
                        <i class="fas fa-plane tag-icon"></i> 国际
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 卡片式列表交互
        document.querySelectorAll('.card-action').forEach(action => {
            action.addEventListener('click', function() {
                if (this.querySelector('.far.fa-heart')) {
                    this.querySelector('i').classList.toggle('far');
                    this.querySelector('i').classList.toggle('fas');
                    this.style.color = this.querySelector('i').classList.contains('fas') ? '#ef4444' : '';
                }
            });
        });
        
        // 简约式列表点击效果
        document.querySelectorAll('.simple-item').forEach(item => {
            item.addEventListener('click', function() {
                const title = this.querySelector('.simple-title').textContent;
                alert(`进入${title}页面`);
            });
        });
        
        // 标签点击交互
        document.querySelectorAll('.tag').forEach(tag => {
            tag.addEventListener('click', function() {
                // 如果是兴趣爱好组的标签
                if (this.closest('.tag-group-title').textContent === '兴趣爱好') {
                    this.classList.toggle('active');
                } else {
                    // 其他组只能选择一个标签
                    const siblings = this.parentElement.querySelectorAll('.tag');
                    siblings.forEach(sib => sib.classList.remove('active'));
                    this.classList.add('active');
                }
            });
        });
        
        // 时间线点击效果
        document.querySelectorAll('.timeline-content').forEach(item => {
            item.addEventListener('click', function() {
                const text = this.textContent.trim();
                alert(`查看详情: ${text.substring(0, 20)}...`);
            });
        });
        
        // 图文混排列表点击
        document.querySelectorAll('.media-item').forEach(item => {
            item.addEventListener('click', function() {
                const title = this.querySelector('.media-title').textContent;
                alert(`查看文章: ${title}`);
            });
        });
    </script>
</body>
</html>
